<template>
    <div class="sunOfDir" style="width: 300px;">
        <label for="validationTextarea">创建子目录</label>
        <!-- 子目录标题 -->
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">目录名</span>
            </div>
            <input type="text" 
            name="目录名"
            v-model="subData.title"
            v-validate="{ 
            required: true , 
            'illegalchar': true ,
            'max': 20
            }" 
            maxlength="21"
            :class="{ 'is-invalid' : errors.first('目录名') }"
            class="form-control rounded-right" required>
            <div class="invalid-feedback">
                {{ errors.first('目录名') }}
            </div>
        </div>
        <!-- 子目录备注 -->
        <div class="mb-3 mt-3">
            
            <textarea class="form-control " 
            id="validationTextarea" 
            name="子目录备注"
             v-validate="{ 
            required: true , 
            'illegalchar': true ,
            'max': 100
            }" 
            maxlength="101"
            :class="{ 'is-invalid' : errors.first('子目录备注') }"
            v-model="subData.common"
            placeholder="子目录备注信息" required></textarea>
            <div class="invalid-feedback">
                {{ errors.first('子目录备注') }}
            </div>
        </div>
        <div class="d-flex justify-content-center align-items-center  bd-highlight mksubDir-opr">
            <button type="button" class="btn btn-secondary m-2"
            @click="close()"
            >取消</button>
            <button type="button" class="btn btn-primary m-2"
            @click="postdata"
            >确定</button>  
        </div>
        <div 
        v-if="target.info"
        class="text-danger d-flex justify-content-center align-items-center  bd-highlight mksubDir-opr">
            {{target.info}}
        </div>
    </div>
</template>

<script>
import { freshToken } from "../../../../api/interface/token.js";
import { setInnerDir } from "../../../../api/interface/filesystem.js";

//工具模块
import { tools } from "../../../../api/tools.js"; 

export default {
    
    data(){
        return {
            subData:{
                title:"",
                common:""
            },
            target:{
                info:""
            }
        };
    },
    inject:['noteAgent'],
    methods: {
        resetInputData(){
            this.subData.title = "";
            this.subData.common = "";
        },
        close(){
            this.resetInputData();
            let note = this.noteAgent();
            note.popup.subDir = false;
        },
        //获取当前目录下的子目录内容
        fetchCurrentData(){
            let note = this.noteAgent();
            note.$refs.exploreFile.fatchData(0,20);
        },
        //创建当前目录下子目录
        createContentOfCurrentDir(){
            let that = this;
            let setData = {};
            let current = this.$store.getters.getCurrentItem;
            if( !current ){
                //当前没有选定上级目录
                this.target.info="尚未选定笔记本";
                return ;
            }
            if( current.top_id ){
                setData.top_id = current.top_id;
                setData.content = this.subData;
            }
            if( current.inner_id ){
                setData.inner_id = current.inner_id;
                setData.content = this.subData;
            }
            setInnerDir( setData ).then(res=>{
                
                // //获取当前目录的子目录内容
                // this.fetchCurrentData();
                let note = this.noteAgent();
                note.$refs.exploreFile.innerDirlist.push( res.data.data );
                //关闭弹层
                this.close();
            }).catch(err=>{
                console.log("create inner dir  err: ", err);
                this.$httpError.checkResStatus(err.data,function(){
                    
                    //重新请求生成token
                    freshToken().then(res=>{
                        
                        localStorage.setItem("token", res.data.data.token);
                        that.createContentOfCurrentDir( );
                    })
                },that);
            });
        },
        // 检验输入内容
        verifyInput(){
            this.$validator.validate().then(result => {
                if (!result) {
                    console.log("error: ", this.errors);
                    if (this.errors.has('目录名')) {
                        
                        return
                    } 
                    if (this.errors.has('子目录备注')) {
                        
                        return
                    } 
                } else {
                    this.createContentOfCurrentDir();   // 验证通过后请求接口的方法
                }
            });
        },
        //防抖控制提交
        postdata: tools.debounceWithTrigger( function(){
            this.verifyInput();
        } , 1000 , true)


    },
}
</script>

<style lang="scss">

.sunOfDir{
    display: inline-block;
    margin: 1.5em;
}
</style>